import React, { PropTypes } from 'react';
import { Breadcrumb,Tree,Table,Button, Form,Row,InputNumber,Switch, Input,Select, DatePicker, Col} from 'antd';
const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;
const InputGroup = Input.Group;
const Option = Select.Option;

import { connect } from 'react-redux'
import { showMask } from '../../action/mask';

import '../less/paybill.less';

const columns = [{
  title: '序号',
  dataIndex: 'index',
}, {
  title: '操作',
  dataIndex: 'option',
  render(text,record,index){
      return <a href="" style={{color:'red'}}>删除</a>
  }
}, {
  title: '名称',
  dataIndex: 'name',
}, {
  title: '数量',
  dataIndex: 'number',
}, {
  title: '条码',
  dataIndex: 'code',
}, {
  title: '拼音码',
  dataIndex: 'pinyin',
}];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    index:i+1,
    number: i+1,
    name:'物业费',
    code:`num00${i}`,
    pinyin:`num00${i}`
  });
}

const dataSource2 = [{
  key: '1',
  name: '胡彦斌',
  age: 32,
  address: '西湖区湖底公园1号'
}, {
  key: '2',
  name: '胡彦祖',
  age: 42,
  address: '西湖区湖底公园1号'
}, {
  key: '3',
  name: '胡彦祖',
  age: 42,
  address: '西湖区湖底公园1号'
}, {
  key: '4',
  name: '胡彦祖',
  age: 42,
  address: '西湖区湖底公园1号'
}];

const columns2 = [{
  title: '姓名',
  dataIndex: 'name',
  key: 'name',
}, {
  title: '年龄',
  dataIndex: 'age',
  key: 'age',
}, {
  title: '住址',
  dataIndex: 'address',
  key: 'address',
}];

const pagination = {
  total: data.length,
  showSizeChanger: true,
  onShowSizeChange(current, pageSize) {
    console.log('Current: ', current, '; PageSize: ', pageSize);
  },
  onChange(current) {
    console.log('Current: ', current);
  },
};

class PayTimeRecord extends React.Component {
  constructor() {
    super();
    this.state = {
    };
  }
  componentDidMount() {

  }
  render() {
    return (
      <div className="ptrContainer">
          <Row>
            <Col span={14}>
                <div className="ptrHead">
                    房号：彼岸－13-9-9-2
                    <span style={{float:'right'}}>流水号：372837928320390202</span>
                </div>
                <div className="ptrTable">
                  <Table columns={columns} dataSource={data} pagination={pagination}/>
                </div>
            </Col>
            <Col span={10} style={{paddingLeft:20}}>
              <div className="ptrHead ptrBorder">
                  商品条码
                  <div className="ant-search-input-wrapper" style={{width:200,marginLeft:10}}>
                   <InputGroup className='ant-search-input'>
                     <Input placeholder={'请输入关键字'}/>
                     <div className="ant-input-group-wrap">
                       <Button icon="search" className="ant-search-btn" />
                     </div>
                   </InputGroup>
                 </div>
                  <Button onClick={()=>{
                      this.props.changeAdd(true);
                  }} type="ghost" style={{float:'right',marginTop:-5}}>返回</Button>
              </div>
              <div className="ptrForm" style={{paddingTop:10}}>
                <Form horizontal className="ant-advanced-search-formT">
                <Row gutter={16}>
                  <Col sm={16}>
                    <FormItem
                      label="商品条码"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 18 }}
                      required
                    >
                      <Input size="default" />
                    </FormItem>
                    <FormItem
                      label="商品名称"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 18 }}
                      required
                    >
                      <Input size="default" />
                    </FormItem>
                    <FormItem
                      label="数量"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 18 }}
                      required
                    >
                      <Input placeholder="请输入经办人" size="default" />
                    </FormItem>
                    <FormItem
                      label="分类"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 18 }}
                    >
                      <Input size="default" />
                    </FormItem>
                  </Col>
                  <Col sm={8}>
                      <img src="http://pic1.cxtuku.com/00/07/85/b6088e97dfbd.jpg" style={{width:'100%'}}/>
                  </Col>
                </Row>
                </Form>
              </div>
              <div className="ptrSubHead">
                会员卡信息
              </div>
              <div className="bgWhite">
                <Form horizontal className="ant-advanced-search-formT">
                  <Row>
                    <Col span={24}>
                      <FormItem
                        label="会员折扣"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                      >
                        <Switch />
                      </FormItem>
                      <FormItem
                        label="会员卡号"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                        required
                      >
                        <Input size="default" />
                      </FormItem>
                      <FormItem
                        label="奖励积分"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                        required
                      >
                        <Input placeholder="请输入经办人" size="default" />
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </div>
              <div className="ptrSubHead">
                优惠信息
              </div>
              <div className="bgWhite" style={{paddingTop:10}}>
                <Form horizontal className="ant-advanced-search-formT">
                  <Row>
                    <Col span={12}>
                      <FormItem
                        label="优惠金额"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                        required
                      >
                        <InputNumber placeholder="请输入进价" size="default" step={0.01} addonAfter={<span>元</span>}/>
                      </FormItem>
                      <FormItem
                        label="总价"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                      >
                        <InputNumber placeholder="请输入进价" size="default" step={0.01} addonAfter={<span>元</span>}/>
                      </FormItem>
                    </Col>
                    <Col span={12}>
                      <FormItem
                        label="折扣价"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                        required
                      >
                        <InputNumber step={0.01} addonAfter={<span>元</span>}/>
                      </FormItem>
                      <FormItem
                        label="应收价格"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                        required
                      >
                        <InputNumber step={0.01} addonAfter={<span>元</span>}/>
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </div>

              <div className="ptrSubHead">
                付款方式
              </div>
              <div className="bgWhite" style={{paddingTop:10}}>
                <Form horizontal className="ant-advanced-search-formT">
                  <Row>
                    <Col span={12}>
                      <FormItem
                        label="刷卡金额"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                      >
                        <InputNumber placeholder="请输入进价" size="default" step={0.01} addonAfter={<span>元</span>}/>
                      </FormItem>
                      <FormItem
                        label="现金金额"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                      >
                        <InputNumber placeholder="请输入进价" size="default" step={0.01} addonAfter={<span>元</span>}/>
                      </FormItem>
                    </Col>
                    <Col span={12}>
                      <FormItem
                        label="下卡金额"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                      >
                        <InputNumber step={0.01} addonAfter={<span>元</span>}/>
                      </FormItem>
                      <FormItem
                        label="找零金额"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                      >
                        <InputNumber step={0.01} addonAfter={<span>元</span>}/>
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </div>
              <div className="ptrBtn">
                <Button type="ghost">取消</Button>
                <Button type="primary" style={{marginLeft:10}}>结账</Button>
              </div>
            </Col>
          </Row>
      </div>
    );
  }
}

export default PayTimeRecord
